<template>
  <!-- 月周日 -->
  <div align="right" class="monthWeekDayWrap">
    <div :class="dataType===10 ? 'isActive' :''" class="typeBtn" @click="clickedBtn(10)">月</div>
    <div :class="dataType===20 ? 'isActive' :''" class="typeBtn" @click="clickedBtn(20)">周</div>
    <div :class="dataType===30 ? 'isActive' :''" class="typeBtn" @click="clickedBtn(30)">日</div>
  </div>
</template>

<script>
  export default {
    name: 'MonthWeekDay',
    props: {
      dataType: {
        type: Number,
        default: 10
      },
      height: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    methods: {
      clickedBtn(value) {
        this.$emit('ClickedBtn', value)
      }
    }
  }
</script>

<style scoped>
.typeBtn{
  display: inline-block;
  margin-right: 8px;
  width: 44px;
  height: 28px;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  border-radius: 2px;
  background: linear-gradient(180deg, #33367b 0%, #050d25 100%);
  box-shadow: 0px 0px 4px 0px #121212 inset;
  cursor: pointer;
}
.isActive{
  background: linear-gradient(180deg, #14c473 0%, #0679dc 30%,#05091e 100%);
  box-shadow: 0px 0px 4px 0px #151515 inset;
}
.monthWeekDayWrap{
  width: 200px;
  position: absolute;
  right: 0;
  top: 4px;
}
</style>
